<template>
  <div id="app">
    <h3 class="xh-title" ref="xh-title">短链接生成演示</h3>
    <input-box />
    <result-box />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import InputBox from "./components/InputBox.vue";
import ResultBox from "./components/ResultBox.vue";

interface FontColor {
  fontColor: string;
  shadowColor: string;
}

@Component({
  components: {
    InputBox,
    ResultBox,
  },
})
export default class App extends Vue {
  public $refs!: {
    "xh-title": HTMLElement;
  };
  // mounted
  mounted(): void {
    this.init();
  }

  // methods
  init(): void {
    const _title: HTMLElement = this.$refs["xh-title"];
    // 定义颜色
    const fontColors: Array<FontColor> = [
      { fontColor: "#3900FF", shadowColor: "#004CFD" },
      { fontColor: "#1900FF", shadowColor: "#0166FE" },
      { fontColor: "#0100FF", shadowColor: "#0177FF" },
      { fontColor: "#005CFF", shadowColor: "#009FFF" },
      { fontColor: "#007CFF", shadowColor: "#00C2FF" },
      { fontColor: "#0091FF", shadowColor: "#00F0FF" },
      { fontColor: "#00A9FF", shadowColor: "#00FFEA" },
    ];
    this.setColor(fontColors, _title);
    setInterval((): void => {
      let fontColorPop: FontColor | any = fontColors.pop();
      fontColors.unshift(fontColorPop);
      this.setColor(fontColors, _title);
    }, 100);
  }

  setColor(fontColors: Array<FontColor>, title: HTMLElement): void {
    let _text = "";
    Array.from(title.innerText).forEach((t: any, i: number): void => {
      _text += `<span style="color:${fontColors[i].fontColor};text-shadow:0 0 0 ${fontColors[i].shadowColor},0 0 3px ${fontColors[i].shadowColor};">${t}</span>`;
    });
    title.innerHTML = _text;
  }
}
</script>

<style lang="stylus">
* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100vw;
  height: 100vh;
}

#app {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  min-width: 1000px;
  position: relative;
  background-color: #fefefe;
}

.xh-title {
  font-size: 50px;
  // text-shadow: 0 0 0 lightyellow, 0 0 3px yellow, 0 0 6px brown;
  color: #ffffff;
  letter-spacing: 5px;
  width: 100%;
  line-height: 80px;
  text-align: center;
}
</style>
